<template>
  <div id="travelMileageCharts" class="clearFix card-shadow bgc-fff">
    <div class="clearFix">
      <canvas></canvas>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  export default {
    name: '',
    // props: ['customerFromData'],
    data() {
      return {
        customerFromChartData: []
      }
    },
    components: {
    },
    created() {
    },
    mounted() {
    },
    methods: {
      initCharts(data1, data2) {
        const itemStyle = {
          normal: {
          },
          emphasis: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
          }
        }
        const myChart = echarts.init(document.getElementById('travelMileageCharts'))
        const brushed = []
        myChart.on('brushSelected', renderBrushed)
        function renderBrushed(params) {
          var brushComponent = params.batch[0]
          for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
            var rawIndices = brushComponent.selected[sIdx].dataIndex
            brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '))
          }
          return brushed
        }
        setTimeout(function() {
          myChart.dispatchAction({
            title: {
              backgroundColor: '#333',
              text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
              bottom: 0,
              right: 0,
              width: 100,
              textStyle: {
                fontSize: 12,
                color: '#fff'
              }
            }
          })
        }, 0)
        const option = {
          title: {
            text: '行驶里程对比 月份/Km/台',
            left: 'center',
            textStyle: {
              color: '#333'
            }
          },
          backgroundColor: '#fff',
          legend: {
            data: ['去年同期', '今年同期', 'bar3', 'bar4'],
            align: 'left',
            left: 10
          },
          brush: {
            toolbox: ['keep', 'clear'],
            xAxisIndex: 0
          },
          toolbox: {
            feature: {
              magicType: {
                type: ['stack', 'tiled']
              }
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            'formatter': '{b}月 行驶里程<br/> {a} : {c}Km/台<br/> {a1} : {c1}Km/台'
          },
          xAxis: {
            data: data1.map(function(item) {
              return item.name + '月'
            }),
            name: '月份',
            silent: false,
            axisLine: { onZero: true },
            splitLine: { show: false },
            splitArea: { show: false }
          },
          yAxis: {
            name: 'Km/台',
            inverse: true,
            splitArea: { show: false }
          },
          grid: {
            left: 100
          },
          visualMap: {
            show: false,
            type: 'continuous',
            dimension: 1,
            text: ['High', 'Low'],
            inverse: true,
            itemHeight: 200,
            calculable: true,
            min: 0,
            max: 300,
            top: 60,
            left: 10,
            inRange: {
              colorLightness: [0.4, 0.8]
            },
            outOfRange: {
              color: '#bbb'
            },
            controller: {
              inRange: {
                color: '#2f4554'
              }
            }
          },
          series: [
            {
              name: '去年同期',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data1
            },
            {
              name: '今年同期',
              type: 'bar',
              stack: 'one',
              itemStyle: itemStyle,
              data: data2
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #travelMileageCharts{
    margin: 0 0 0 0;
    width:100%;
    height: 440px;
  }
</style>

